<script setup>
    import {
        Search as 查询,
        Edit as 编辑,
        Check as 确认,
        Message as 消息,
        Star as 星星,
        Delete as 删除,
        Share as 分享,
        Upload as 上传,
        ArrowLeft as 左箭头,
        ArrowRight as 右箭头,
        Eleme as 饿了么,
    } from '@element-plus/icons-vue'


    const 按钮列表 = [
        {类型: '', 内容: '默认'},
        {类型: 'primary', 内容: '主要'},
        {类型: 'success', 内容: '成功'},
        {类型: 'info', 内容: '消息'},
        {类型: 'warning', 内容: '警告'},
        {类型: 'danger', 内容: '危险'},
    ]

    const 按钮尺寸 = ['small', 'default', 'large']
</script>
<template>
    <h1 class="text-lg">基础用法</h1>
    <div class="mb-4">
        <el-button default>默认</el-button>
        <el-button type="primary">主</el-button>
        <el-button type="success">成</el-button>
        <el-button type="info">知</el-button>
        <el-button type="warning">警</el-button>
        <el-button type="danger">危</el-button>
    </div>
    <div class="mb-4">
        <el-button plain="">素色</el-button>
        <el-button plain="" type="primary">主</el-button>
        <el-button plain="" type="success">成</el-button>
        <el-button plain="" type="info">知</el-button>
        <el-button plain="" type="warning">警</el-button>
        <el-button plain="" type="danger">危</el-button>
    </div>
    <div class="mb-4">
        <el-button round="" type="default">环绕</el-button>
        <el-button round="" type="primary">主</el-button>
        <el-button round="" type="success">成</el-button>
        <el-button round="" type="info">知</el-button>
        <el-button round="" type="warning">警</el-button>
        <el-button round="" type="danger">危</el-button>
    </div>
    <div class="mb-4">
        <el-button circle="" :icon="查询"></el-button>
        <el-button circle="" type="primary" :icon="编辑"></el-button>
        <el-button circle="" type="success" :icon="确认"></el-button>
        <el-button circle="" type="info" :icon="消息"></el-button>
        <el-button circle="" type="warning" :icon="星星"></el-button>
        <el-button circle="" type="danger" :icon="删除"></el-button>
    </div>
    <h1 class="text-lg">禁用状态</h1>
    <div class="mb-4">
        <el-button disabled="disabled">默认</el-button>
        <el-button disabled="disabled" type="primary">主</el-button>
        <el-button disabled="disabled" type="success">成</el-button>
        <el-button disabled="disabled" type="info">知</el-button>
        <el-button disabled="disabled" type="warning">警</el-button>
        <el-button disabled="disabled" type="danger">危</el-button>
    </div>
    <div class="mb-4">
        <el-button circle="" disabled="disabled" :icon="查询"></el-button>
        <el-button circle="" disabled="disabled" :icon="编辑" type="primary"></el-button>
        <el-button circle="" disabled="disabled" :icon="确认" type="success"></el-button>
        <el-button circle="" disabled="disabled" :icon="消息" type="info"></el-button>
        <el-button circle="" disabled="disabled" :icon="星星" type="warning"></el-button>
        <el-button circle="" disabled="disabled" :icon="删除" type="danger"></el-button>
    </div>
    <h1 class="text-lg">文本按钮</h1>
    <div>
        <div class="mb-4">
            <el-button v-for="按钮 in 按钮列表" :key="按钮.内容" link :type="按钮.类型">{{ 按钮.内容 }}</el-button>
        </div>
        <div class="mb-4">
            <el-button v-for="按钮 in 按钮列表" :key="按钮.内容" :type="按钮.类型" disabled link>{{ 按钮.内容 }}</el-button>
        </div>
        <div class="mb-4">
            <el-button v-for="按钮 in 按钮列表" :key="按钮.内容" text :type="按钮.类型">{{ 按钮.内容 }}</el-button>
        </div>
        <div class="mb-4">
            <el-button v-for="按钮 in 按钮列表" :key="按钮.内容" text bg :type="按钮.类型">{{ 按钮.内容 }}</el-button>
        </div>
        <div class="mb-4">
            <el-button v-for="按钮 in 按钮列表" :key="按钮.内容" text="" disabled="disabled" :type="按钮.类型">{{ 按钮.内容 }}</el-button>
        </div>
    </div>
    <h1 class="text-lg">图标按钮</h1>
    <div>
        <div class="mb-4">
            <el-button type="primary" :icon="编辑"></el-button>
            <el-button type="primary" :icon="分享"></el-button>
            <el-button type="primary" :icon="删除"></el-button>
            <el-button type="primary" :icon="查询">查询</el-button>
            <el-button type="primary">
                上传
                <el-icon class="el-icon--right"><component :is="上传"></component></el-icon>
            </el-button>
        </div>
    </div>
    <h1 class="text-lg">按钮组</h1>
    <div class="mb-4">
        <el-button-group>
            <el-button :icon="左箭头" type="primary">上一页</el-button>
            <el-button type="primary">
                下一页
                <el-icon class="el-icon--right">
                    <component :is="右箭头"></component>
                </el-icon>
            </el-button>
        </el-button-group>
        &nbsp;
        <el-button-group>
            <el-button :icon="编辑" type="warning" plain></el-button>
            <el-button :icon="分享" type="success" plain></el-button>
            <el-button :icon="删除" type="danger" plain></el-button>
        </el-button-group>
    </div>
    <h1 class="text-lg">加载状态按钮</h1>
    <div class="mb-4">
        <el-button loading="" type="primary">加载中</el-button>
        <el-button loading :loading-icon="饿了么" type="primary">加载中</el-button>
    </div>
    <h1 class="text-lg">按钮尺寸</h1>
    <div>
        <div class="mb-4">
            <el-button v-for="尺寸 in 按钮尺寸" :key="尺寸" :size="尺寸" type="primary" :icon="查询">{{ 尺寸 }}</el-button>
        </div>
    </div>
    <h1 class="text-lg">按钮标签</h1>
    <div class="mb-4">
        <el-button>按钮</el-button>
        <el-button tag="div" role="button" tabindex="0">结构容器</el-button>
        <el-button tag="a" role="button" type="primary" href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">链接</el-button>
    </div>
    <h1 class="text-lg">按钮颜色</h1>
    <div class="mb-4">
        <el-button color="#626aef">默认</el-button>
        <el-button color="#626aef" disabled>默认</el-button>
        <el-button color="#626aef" plain>默认</el-button>
    </div>
</template>

<style scoped>
        /* .el-button {
            font-weight: 500;
        } */
</style>